<!--
 * @Author: DUST
 * @Date: 2023-05-16 09:56:33
 * @LastEditors: DUST
 * @LastEditTime: 2023-05-17 17:28:11
 * @FilePath: \vite-project\src\components\adminMenu.vue
 * @Description: 
 * undefined
-->
<template>
  <div class="adminMenu">
    <a-menu
      mode="inline"
      v-model:selectedKeys="selectKey"
      v-model:openKeys="openKey"
      :theme="theme"
      :inline-collapsed="collapsed"
      :style="`width: ${collapsed ? 80 : 240}px;`"
    >
      <template v-for="(item, i) of props.menuList" :key="item.meta.key">
        <template v-if="!item.meta?.noShow">
          <template v-if="item.children && item.children.length > 0">
            <a-sub-menu :key="item.meta.key">
              <template #icon>
                <AppstoreOutlined />
              </template>
              <template #title>{{ item.meta.title }}</template>
              <template v-for="(childItem, j) of item.children">
                <a-menu-item
                  v-if="!childItem.meta?.noShow"
                  :key="childItem.meta.key"
                  @click="router.push(
                    `${onePath}${item.path == '' ? '' : '/' + item.path}${childItem.path == '' ? '' : '/' + childItem.path}`
                  )"
                >
                  {{ childItem.meta.title }}
                </a-menu-item>
              </template>
            </a-sub-menu>
          </template>
          <template v-else>
            <a-menu-item :key="item.meta.key" @click="router.push(
              `${onePath}${item.path == '' ? '' : '/' + item.path}`
            )">
              <template #icon>
                <PieChartOutlined />
              </template>
              <span>{{ item.meta.title }}</span>
            </a-menu-item>
          </template>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { PieChartOutlined, AppstoreOutlined } from "@ant-design/icons-vue";
import { RouteMenuInterface } from "../interface";
import router from "../router";

const collapsed = ref(false);
const theme = ref("");
const props = defineProps({
  menuList: {
    type: Array<RouteMenuInterface>,
    default: () => [],
  },
});
const onePath = computed(() => router.currentRoute.value.matched[1].path);
const selectKey = computed(() => [router.currentRoute.value.meta?.key]);
const openKey = ref([
  router.currentRoute.value.matched[
    router.currentRoute.value.matched.length - 2
  ].meta.key,
]);
</script>

<style lang="less" scoped>
.adminMenu {
  height: 100%;
  box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px);
}
</style>
